<template>
  <div class="box">
    <van-icon name="arrow-left" class="jiantou" @click="goBack" />
    <van-search
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      class="sousuo"
      @focus="show = true"
      @blur="show = false"
    >
      <template #action>
        <div @click="onSearch(value)" class="search">搜索</div>
      </template>
    </van-search>
    <van-dropdown-menu>
      <!--  -->
      <van-dropdown-item v-model="value1" :options="option1" @change="paixu" />
      <!--  -->
      <van-dropdown-item title="筛选" ref="item">
        <div class="shaixuan" style="display: flex">
          <van-cell-group>
            <van-field v-model="value3" label="" placeholder="最低价格" />
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="value4" label="" placeholder="最高价格" />
          </van-cell-group>
        </div>
        <van-button
          @click="shaixuan"
          round
          color="red"
          type="primary"
          size="large"
          style="height: 40px"
          >确认</van-button
        >
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-card
      v-for="item in searchlist"
      :key="item.proid"
      :price="item.originprice"
      :title="item.proname"
      :thumb="item.img1"
      @click="goGoodsDetail(item.proid)"
    />
  </div>
</template>

<script>
export default {
  name: "SearchList",
  data() {
    return {
      show: false,
      value: "",
      value1: 0,
      value2: "a",
      value3: 0,
      value4: 999,
      option1: [
        { text: "全部商品", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      searchlist: [],
      arr: [],
      recentlist: JSON.parse(localStorage.getItem("search")) || [],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSearch(val) {
      console.log("val: ", val) ;
      this.$service
        .get("api/pro/search", {
          params: {
            count: 1,
            limitNum: 10,
            keyword: val,
          },
        })
        .then((res) => {
          // console.log("res", res);
          this.searchlist = res.data.data;
          this.arr = res.data.data;
        });

      let index = this.recentlist.indexOf(val);
      if (index == -1) {
        this.recentlist.unshift(val);
      } else {
        console.log(index);
        this.recentlist.splice(index, 1);
        this.recentlist.unshift(val);
      }
      localStorage.setItem("search", JSON.stringify(this.recentlist));
      console.log(val, "val");
    },
    goGoodsDetail(id) {
      //去详情页
      this.$router.push("/DetailVue/" + id);
    },
    //升序 降序
    paixu(value) {
      this.searchlist = this.arr;
      let arr = [...this.searchlist];
      /* this.searchlist= arr.sort((a,b)=>{
                return  value==1 ?a.originprice - b.originprice : b.originprice - a.originprice 
        }) */
      if (value == 1) {
        //价格升序
        this.searchlist = arr.sort((a, b) => {
          return a.originprice - b.originprice;
        });
      } else if (value == 2) {
        //价格降序
        this.searchlist = arr.sort((a, b) => {
          return b.originprice - a.originprice;
        });
      } else if (value == 0) {
        this.searchlist = this.arr;
      }
    },

    //价格筛选
    shaixuan() {
      this.$refs.item.toggle();
      this.searchlist = this.arr;
      let arr = [...this.searchlist];
      console.log("333", this.value3);
      let a = this.value3;
      let b = this.value4;
      console.log("444", this.value4);
      this.searchlist = arr.filter((item, index) => {
        if (a <= item.originprice && item.originprice <= b) {
          return item;
        }
      });
    },
  },
  created() {
    let val = this.$route.params.goodsSearch;
    // console.log('val: ', val);
    this.value = val;
    this.$service
      .get("api/pro/search", {
        params: {
          count: 1,
          limitNum: 10,
          keyword: val,
        },
      })
      .then((res) => {
        // console.log("res", res);
        this.searchlist = res.data.data;
        this.arr = res.data.data;
      });
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.jiantou {
  position: absolute;
  top: 1rem;
  left: 8px;
  font-size: 1.5rem;
}
.sousuo {
  width: 94%;
  float: right;
  margin-left: 20px;
}
.search {
  height: 1.4375rem;
  width: 2.7rem;
  color: #fff;
  background-color: red;
  text-align: center;
  line-height: 1.4375rem;
}
</style>